import React from 'react';
import {inject, observer} from 'mobx-react';
import { Browser } from 'weaver-mobile-page'
import { withRouter } from 'react-router-dom';
import { Tools ,SearchBar,Icon, NavBar, Picker, WhiteSpace, List, DatePicker, Carousel, WingBlank} from 'weaver-mobile';
import GoalLevelCard from './GoalLevelCard'
import GoalLevelList from './GoalLevelList'
import GoalLevelTag from './GoalLevelTag'
import GoalLinkage from '../goalLinkage/GoalLinkage'
import MenuList from '../../../public/menulist'
import AlertPage from '../../../public/alertPage'
import {toJS} from 'mobx';
const getLabel = Tools.getLabel;
@inject('goalLevelStore','goalCommonStore','goalMainStore')
@withRouter
@observer
class GoalLevel extends React.Component {

    constructor(props){
        super(props);
        this.store = this.props.goalLevelStore;
        this.state={
            goalInfoList:[
               
            ],
            goalId:"",
            periodData:{
                key:'period',
                label: getLabel(15386,'周期'),
                options: [
                    {label: getLabel(332,'全部'),value:"0"},
                    {label: getLabel(19398,'月度'),value:"1"},
                    {label: getLabel(17495,'季度'),value:"2"},
                    {label: getLabel(17138,'年度'),value:"3"},
                    {label: getLabel(390757,'三年'),value:"4"},
                    {label: getLabel(390758,'五年'),value:"5"},
                ]
            },
        }
    }

    componentWillMount(){
        this.goalCardList();
    }

    componentWillReceiveProps(newProps){
        const {goalLevelStore:{iscgoal}} = this.props;
        if(this.props.condtype != newProps.condtype && iscgoal){
            let condtype = newProps.condtype;
            this.goalCardList(condtype);
        }
    }


    componentDidMount(){
    }

    goalCardList = (type) =>{
        const {goalLevelStore:{setOrgData},condtype,typeId,orgId} = this.props;
        if(type){
            setOrgData(type,typeId,orgId)
        }else{
            setOrgData(condtype,typeId,orgId)
        }
        this.store.goalCardList({});
    }

    /**
     * 切换卡片回调
     */
    onCardSwitch = (id,name) =>{
        this.store.onCardSwitch(id,name);
        this.setState({goalId:id})
    }

    /**
     * 切换标签回调
     */
    onTagSwitch = (id,list) =>{
        // let params = {supid:id}
        this.store.onTagSwitch(id,list)
    }

    onMenuChange = (selectKey) =>{
        const {setCommonParams,goalCommonStore,onCallBackSuccess} = this.props;
        const {setSelectViewType,selectViewType} = goalCommonStore;
        if(selectKey == selectViewType){
            return;
        }
        setCommonParams("",selectKey,"")
        setSelectViewType(selectKey)
        // if(typeof onCallBackSuccess == "function"){
        //     onCallBackSuccess(selectKey)
        // }
    }

    onChange = (value) =>{
        const { setCondition } = this.store;
        const { goalLevelStore:{setTagLevelList},goalMainStore:{orgCardList,setTypeId,setOrgId,setOrgtitle,setCurrentOrgId}} = this.props;
        let currentOrgId = value.currentOrgId;
        setTypeId(orgCardList[currentOrgId].type)
        setOrgId(orgCardList[currentOrgId].orgId);
        setOrgtitle(orgCardList[currentOrgId].orgName);
        setCurrentOrgId(currentOrgId);
        this.setCreate(currentOrgId);
        value.typeId = orgCardList[currentOrgId].type;
        value.orgId = orgCardList[currentOrgId].orgId;
        setCondition(value);
        setTagLevelList([{id:"",name:orgCardList[currentOrgId].orgName}])
    }

    setCreate = (value) =>{
        const { goalMainStore:{orgCardList,setCanCreate}} = this.props;
        if(orgCardList[value].canCreate){
            setCanCreate(true);
        }else{
            setCanCreate(false);
        }
    }

    render() { 
        const {goalMainStore,goalCommonStore,setCommonParams,condtype,typeId,orgId,orgTypeList,currentOrgId,orgtitle} = this.props;
        const {goalInfoList,currentkey,tagLevelList,loading,nowyear,nowmonth,nowseason,currentperiod,iscgoal,msg,rootname} = this.store;
        const {viewType,selectViewType,setSelectViewType} = goalCommonStore;
        const {canCreate} = goalMainStore;
        const {goalId,periodData} = this.state;
        let cardName = condtype == 2 ? orgtitle : rootname;
        if(!iscgoal){
            return <AlertPage paddingTop={"40%"} top={"0"} show={true} icon="wuquanxian" msg={msg} ></AlertPage>
        }
        return (
          <div className="workrelate_mobile_level_goal">
              <WhiteSpace size="md" />
              <div className="level_goal_top">
                <div className="level_goal_top_left">
                    {condtype != "2" &&  <MenuList
                        data={viewType}
                        selectKey={selectViewType}
                        onChange={(selectKey) =>{this.onMenuChange(selectKey)}}
                        width={30}
                        showMenu={false}
                        showSelectText={false}
                        itemWith={100}
                        paddingHeight={5}
                        paddingWidth={7}
                        />}
                </div>
                <div className="level_goal_top_center">
                    <GoalLinkage onChange={(value)=>this.onChange(value)} showStatus={false} nowyear={nowyear} nowmonth={nowmonth} nowseason={nowseason} currentperiod={currentperiod} locationKey={new Date().getTime()} condtype={condtype} orgTypeList={orgTypeList} currentOrgId={currentOrgId}></GoalLinkage>
                </div>

                 {/* <div className="level_goal_top_right">
                    <Icon type="filter-o" size = "xxs"></Icon>
                 </div>
                  */}
              </div>
            <WhiteSpace size="xs" />
            <GoalLevelTag dataList={toJS(tagLevelList)} onCallBackSuccess = {(id,list)=>this.onTagSwitch(id,list)} locationKey={new Date().getTime()}/>
            <WhiteSpace size="xs" />
            <GoalLevelCard dataList={toJS(goalInfoList)} currentkey={currentkey}  rootname = {cardName} onCallBackSuccess = {(id,name)=>this.onCardSwitch(id,name)} locationKey={new Date().getTime()}/>
            <GoalLevelList condtype={condtype} goalId={goalId} locationKey={new Date().getTime()} typeId={typeId} orgId={orgId} canCreate={canCreate}/>
          </div>
        )
      }

}
export default GoalLevel; 
